<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>多列等高布局</title>
    <style>
      body {
        padding: 0;
        margin: 0;
        color: #f00;
      }
      .container {
        margin: 0 auto;
        width: 300px;
        border: 3px solid #00c;
        overflow: hidden;
      }
      .left {
        float: left;
        width: 150px;
        background: #b0b0b0;
        padding-bottom: 2000px;
        margin-bottom: -2000px;
      }
      .right {
        float: left;
        width: 150px;
        background: #6cc;
        padding-bottom: 2000px;
        margin-bottom: -2000px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="left">left</div>
      <div class="right">
        right right right right right right right right right right right right right
        right right right right right right right right right right right right right
        right
      </div>
    </div>
    <!-- <div>5555</div> -->
    <script>
      document.addEventListener("DOMContentLoaded", () => {
        let fontSize = window.innerWidth / 10;
        fontSize = fontSize > 50 ? 50 : fontSize;
        const html = document.querySelector("html");
        html.style.fontSize = fontSize + "px";
        console.log(window.innerWidth);
      });
    </script>
  </body>
</html>
